import React, { Component, PureComponent } from 'react'
/**
 * 浅比较
 * 1、基本数据类型，前后两次值一样就不触发render，如果不一样才会触发
 * 2、引用数据类型: 比较的是地址的值，如果地址内容没有发生变化，就不会触发
 */
export default class App extends PureComponent {
  constructor(){
    super()
    this.state={
      list:[1,2,3,4,5]
    }
  }
  add=()=>{
    this.state.list.push(6)
    this.setState({
      list:[...this.state.list]
    })
  }
  render() {
    const {list}=this.state
    return (
      <div style={{
        display:'flex',
      }}>
        {
          list.length>0&&list.map(item=><div key={item} style={{
            width:'80px',
            height:'80px',
            borderRadius:'100%',
            backgroundColor:'orange',
            display:'flex',
            justifyContent:'center',
            alignItems:'center',
            fontSize:38,
            color:'#fff',
            margin:'10px'
          }}>{item}</div>)
        }
        <div  style={{
            width:'80px',
            height:'80px',
            borderRadius:'100%',
            display:'flex',
            justifyContent:'center',
            alignItems:'center',
            fontSize:38,
            color:'#ccc',
            border:'5px dashed #ccc',
            margin:'10px',
            cursor:'pointer'
          }} onClick={this.add}>+</div>
      </div>
    )
  }
}
